<script setup lang="ts">
import { getVerifyCode } from '@/api/login'
import configs from '@/config/config'
import { useStore } from '@/store'
import { randomString } from '@/utils/foundation'
import storage from '@/utils/storage'
import { getCurrentInstance, ref } from 'vue'
const props = defineProps({
  business: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['send'])

const store = useStore()
const instance = getCurrentInstance()

const themeColor = configs.colors.themeColor

const phone = uni.getSystemInfoSync()
const l = phone.screenWidth / 750

const key = ref('')
const vsrtx = ref('点击进行验证')
const vsr = ref(false)
const hid = ref(true)
const col = ref('#838383')
const movePv = ref(0)
const hasImg = ref('拖动滑块已完成拼图')
const spcode = ref('')
const tl = ref<number>(0)
const moveCode = ref<number>(0)
const moveX = ref(0)
const originalHeight = ref('')
const originalWidth = ref('')
const sliderHeight = ref('')
const sliderWidth = ref('')
const scHight = ref<string | number>(0)
const img = ref('')
const imgbk = ref('')
const endLoad = ref(true)
const imgbKH = ref('')

function show() {
  hid.value = false
}

function hide() {
  if (!vsr.value)
    hid.value = !hid.value
}

function error() {
  vsr.value = false
  hid.value = false
  moveX.value = 0
  moveCode.value = 0
}
defineExpose({
  show,
  hide,
  error,
})
function getCode() {
  col.value = '#b3afae'
  hasImg.value = '图片加载中...'
  if (!storage.getUuid())
    storage.setUuid(randomString())

  uni.request({
    url: `${getVerifyCode}/${props.business}`,
    header: {
      uuid: storage.getUuid(),
      scene: 'STORE',
    },
    success: (res: any) => {
      col.value = '#838383'
      hasImg.value = '拖动滑块以完成拼图'
      const data = res.data.result

      img.value = data.backImage
      imgbk.value = data.slidingImage
      imgbKH.value = `${data.randomY * 1.8}rpx`
      originalHeight.value = `${data.originalHeight * 1.8}rpx`
      originalWidth.value = `${data.originalWidth * 1.8}rpx`
      sliderHeight.value = `${data.sliderHeight * 1.8}rpx`
      sliderWidth.value = `${data.sliderWidth * 1.8}rpx`
      tl.value = 1 / (1.8 * l)
      spcode.value = data.capcode
      key.value = data.key
      store.access.verificationKey = data.key
    },
  })
}

function end() {
  endLoad.value = false
  const xPos = (moveCode.value * tl.value).toString()
  uni.request({
    method: 'POST',
    url: `${getVerifyCode}/${props.business}?xPos=${Number.parseInt(xPos)}&verificationEnums=${props.business}`,
    header: {
      uuid: storage.getUuid(),
      scene: 'STORE',
    },
    success: (res: any) => {
      endLoad.value = true
      res.data.result === false ? (res.data.result = false) : (res.data.result = true)

      if (res.data && res.data.result) {
        emit('send', key.value)
        hide()
        vsr.value = true
        vsrtx.value = '已通过验证'
      }
      else {
        getCode()
        if (movePv.value === 1)
          movePv.value = 0
        else
          movePv.value = 1
      }
    },
  })
}

function moveChange(e: any) {
  moveX.value = e.detail.x
  moveCode.value = e.detail.x
}

onMounted(() => {
  scHight.value = `${phone.screenHeight / 2 - 200}px`
  getCode()
})
</script>

<template>
  <div>
    <div v-if="!hid" class="flex-row-center" :style="{ top: scHight }"
      style="width: 750rpx; position: fixed; z-index: 100; left: 0">
      <div class="flex-column-center" style="background-color: #fcfcfc; padding: 30rpx; border-radius: 10rpx">
        <movable-area class="flex" style="width: 100%" animation="false" :style="{ height: originalHeight }">
          <movable-view scale-value="1" animation="false" damping="5000" :x="moveX" :style="{
            'height': sliderHeight,
            'width': sliderWidth,
            'z-index': 101,
          }" direction="horizontal">
            <image :src="imgbk" class="image" mode="aspectFit" :style="{
              'height': sliderHeight,
              'width': sliderWidth,
              'margin-top': imgbKH,
            }" />
          </movable-view>
          <image :src="img" mode="aspectFit" :style="{ height: originalHeight, width: originalWidth }"
            style="border-radius: 10rpx" />
        </movable-area>

        <movable-area class="flex-row-start" style="
              width: 100%;
              background-color: #efefef;
              height: 80rpx;
              border-radius: 40rpx;
              margin-top: 30rpx;
            ">
          <movable-view scale-value="1" animation="false" damping="50" :x="movePv" class="flex-row-center" style="
                border-radius: 50%;
                height: 100rpx;
                width: 100rpx;
                background-color: #ffffff;
                border: 2rpx solid #e3e3e3;
                margin-top: -13rpx;
              " direction="horizontal" @change="moveChange" @touchend="end">
            <nut-icon v-if="endLoad" :custom-color="themeColor" name="rect-right" />
            <nut-icon v-else :custom-color="themeColor" name="refresh2" />
          </movable-view>

          <span style="padding-left: 140rpx" :style="{ color: col }">
            {{ hasImg }}
          </span>
        </movable-area>
        <div class="flex-row-around padding-top" style="width: 100%">
          <nut-icon :custom-color="themeColor" name="close" @click="hide" />

          <span class="cu-tag bg-cyan round" @click="getCode">
            刷新拼图
          </span>
          <span class="my-neirong-sm cuIcon-safe" style="color: #c1c1c1" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "./animation.css";
@import "./icon.css";

// @import './main.css';
.dh-wt {
  animation: at 1.1s ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background-color: $main-color;
  border-radius: 50%;
}

@keyframes at {
  from {
    width: 27rpx;
    height: 27rpx;
  }

  to {
    width: 45rpx;
    height: 45rpx;
  }
}

.ttcl {
  color: $main-color;
}

.border-index {
  border: 1rpx solid $main-color;
}

.status_bar {
  height: var(--status-bar-height);
  background-color: #f1f1f1;
  width: 100%;
}

.status_bar-nobg {
  height: var(--status-bar-height);
  width: 100%;
}

/* 转圈动画 */
.turn-load {
  animation: turn-my 1s linear infinite;
}

@keyframes turn-my {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

.status_bar-fixed {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  background-color: #f1f1f1;
  z-index: 20;
}

.head-dh-my {
  display: flex;
  position: fixed;
  justify-content: space-around;
  align-items: flex-end;
  padding-bottom: 10rpx;
  z-index: 15;
  background-color: #e3e3e3;
  width: 750rpx;
}

.padding-left {
  padding-left: 20rpx;
}

.padding-left-top {
  padding-left: 20rpx;
  padding-top: 20rpx;
}

.padding-right {
  padding-right: 20rpx;
}

.input-my {
  padding-left: 20rpx;
  border-radius: 40rpx;
  height: 50rpx;
  margin: 10rpx;
}

.tb-tag-absolute {
  position: absolute;
  z-index: 5;
  border-radius: 25rpx;
  font-size: 16rpx;
  margin-left: 25rpx;
  margin-top: -35rpx;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-column-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.flex-column-start {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-column-around {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.flex-row-start {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-row-around {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex-row-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.my-title {
  font-size: 35rpx;
  font-weight: bold;
}

.my-neirong {
  font-size: 26rpx;
  color: #6d6d6d;
}

.my-neirong-sm {
  font-size: 23rpx;
  color: #616161;
}

.my-tag-text {
  font-size: 22rpx;
  padding-top: 20rpx;
  color: #bababa;
}

.padding-top {
  padding-top: 35rpx;
}

.padding-top-sm {
  padding-top: 20rpx;
}

.bottom-dh {
  background-color: #f1f1f1;
  position: fixed;
  z-index: 10;
  bottom: 0;
  width: 750rpx;
  height: 110rpx;
}

.tb-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bottom-text {
  width: 750rpx;
  position: fixed;
  text-align: center;
  font-size: 26rpx;
  color: #9d9d9d;
  bottom: 70rpx;
}

.moneycolor {
  color: #ea5002;
}

.margin-top {
  margin-top: 20rpx;
}

.margin-top-sm {
  margin-top: 12rpx;
}

.margin {
  margin: 20rpx;
}

.margin-left {
  margin-left: 20rpx;
}

.margin-right {
  margin-right: 20rpx;
}

.main-color {
  color: #07d188;
}
</style>
